<template>
  <!-- 底部菜单公共组件 -->
  <van-tabbar v-model="active" active-color="#fc6627" route>
    <van-tabbar-item name="home" to="/">
      <span>首页</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="home-sel"></GeekIcon>
        <GeekIcon v-else name="home"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="question" to="/question"
      ><span>问答</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="qa-sel"></GeekIcon>
        <GeekIcon v-else name="qa"></GeekIcon> </template
    ></van-tabbar-item>
    <van-tabbar-item name="video" to="/video"
      ><span>视频</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="video-sel"></GeekIcon>
        <GeekIcon v-else name="video"></GeekIcon> </template
    ></van-tabbar-item>
    <van-tabbar-item name="user" to="/user"
      ><span>我的</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="mine"></GeekIcon>
        <GeekIcon v-else name="mine"></GeekIcon> </template
    ></van-tabbar-item>
  </van-tabbar>
</template>

<script>
// import GeekIcon from './geek-icon.vue'

export default {
  name: 'AppTabbar',
  // components: { GeekIcon },
  data () {
    return {
      active: 'home'
    }
  }
}
</script>

<style lang="less" scoped>
.van-tabbar {
  background: #f7f8fa;
  position: static;
}
::v-deep .van-tabbar-item--active {
  color: #fc6627;
  background-color: #f7f8fa;
}
::v-deep .van-tabbar-item_icon {
  font-size: 20px;
}
::v-deep .van-tabbar-item_text {
  font-size: 10px;
}
</style>
